<template>
  <div class="home">
    <!-- <van-nav-bar
      title="货车来连备案"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
    /> -->
    <!-- <van-nav-bar class="blue" title="入连人员自主报备" /> -->
    <img src="../../assets/images/hcllba.jpg" />
    <!--  -->
    <van-form>
      <!-- 通过 pattern 进行正则校验 -->
      <van-field input-align="right" label="车牌号码" required readonly v-model="formData.carNo" name="pattern"
        placeholder="请输入车牌号码" :rules="[{ required: true, message: '请输入正确内容' }]" />
      <van-field input-align="right" label="司机姓名" required readonly v-model="formData.name" name="pattern"
        placeholder="请输入司机姓名" :rules="rules.name" />

      <van-field input-align="right" label="身份证号码" required readonly @change="changeInput()" v-model="formData.cardNo"
        name="pattern" placeholder="请输入身份证号码" :rules="rules.cardNo" maxlength="18" />
      <van-field input-align="right" label="手机号" readonly required v-model="formData.mobile" name="phoneRules"
        placeholder="请输入手机号" :rules="[
          { required: true, message: '请输入正确内容' },
          { pattern: /^1[3456789]\d{9}$/, message: '手机号码格式错误！' }
        ]" />
      <van-field input-align="right" v-model="formData.startAddrProvince" readonly required name="area" label="出发省市区"
        placeholder="点击选择出发省市区" @click="showArea = false" :rules="[{ required: true, message: '请输入正确内容' }]" />
      <van-popup v-model:show="showArea" position="bottom">
        <van-area :area-list="areaList" @confirm="onAreaConfirm" @cancel="showArea = false" />
      </van-popup>

      <!-- <van-field
        input-align="right"
        label="出发地详细地址"
        required
        readonly
        v-model="formData.startAddr"
        name="pattern"
        placeholder="请输入出发地详细地址"
        :rules="[{ required: true, message: '请输入正确内容' }]"
      /> -->
      <van-field input-align="right" label="吨位" required readonly v-model="formData.tonnage" name="pattern"
        placeholder="请输入吨位" :rules="[{ required: true, message: '请输入正确内容' }]" />
      <!-- <van-field
        input-align="right"
        v-model="formData.chargeBarrier"
        readonly
        required
        label="入连卡口"
        placeholder="请选择入连卡口"
        @click="trave_mode_show = false"
        :rules="[{ required: true, message: '请输入正确内容' }]"
      /> -->
      <van-popup v-model:show="trave_mode_show" round position="bottom">
        <van-cascader v-model="cascaderValue" title="请选择入连卡口" :options="options" @close="trave_mode_show = false"
          @finish="onFinish" />
      </van-popup>
      <!--
      <van-cell-group title="">
        <van-field
          input-align="right"
          readonly
          required
          is-link
          @click="mudidiContrell"
          label="目的地"
        />
        <div v-show="true"> -->
      <van-field input-align="right" v-model="formData.endAddrProvince" readonly required label="目的地" placeholder="请选择目的地"
        :rules="[{ required: true, message: '请输入正确内容' }]" />
      <!-- <van-field
            input-align="right"
            label="区"
            required
            v-model="formData.endAddrDistrictName"
            name="pattern"
            placeholder="请选择区"
            @focus="showCode = true"
            :rules="[{ required: true, message: '请输入正确内容' }]"
          />
          <van-field
            input-align="right"
            required
            label="街道"
            v-model="formData.endAddrStreet"
            name="pattern"
            placeholder="请输入街道"
            :rules="[{ required: true, message: '请输入正确内容' }]"
          />
          <van-field
            input-align="right"
            label="社区"
            v-model="formData.endAddrCommunity"
            name="pattern"
            placeholder="请输入社区"
          /> -->
      <!-- </div>
      </van-cell-group> -->

      <van-field input-align="right" v-model="formData.endAddr" autosize required readonly rows="1" autosize
        label="目的地详细地址" type="textarea" placeholder="请输入留言" />
      <van-field input-align="right" required name="radio" label="途经重点关注地区">
        <template #input>
          <van-radio-group v-model="formData.avenueFlowArea" :disabled="true" direction="horizontal">
            <van-radio name="1">是</van-radio>
            <van-radio name="0">否</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <!-- <van-field
        input-align="right"
        required
        name="radio"
        label="48小时核酸证明"
      >
        <template #input>
          <van-radio-group
            v-model="formData.nucleicAcid"
            direction="horizontal"
            :disabled="true"
          >
            <van-radio name="1">是</van-radio>
            <van-radio name="0">否</van-radio>
          </van-radio-group>
        </template>
      </van-field> -->
      <van-field input-align="right" label="高速口" required readonly v-model="formData.goal_harbor_name" name="pattern"
        placeholder="请输入高速口" />
      <van-field input-align="right" label="车辆所属公司" required readonly v-model="formData.owner_unit" name="pattern"
        placeholder="请输入车辆所属公司" />

      <van-field input-align="right">
        <template #input> </template>
      </van-field>
      <van-row v-if="formData.health_code">
        <van-col span="24">健康码</van-col>
        <van-col span="24">
          <van-image width="99%" height="100%" :src="formData.health_code" />
        </van-col>
      </van-row>
      <van-row style="padding-top: 3rem;" v-if="formData.tour_code">
        <van-col span="24">行程码 </van-col>
        <van-col span="24">
          <van-image width="99%" height="100%" :src="formData.tour_code" />
        </van-col>
      </van-row>
      <van-row style="padding-top: 3rem;" v-if="formData.accounting_report">
        <van-col span="24">核酸报告 </van-col>
        <van-col span="24">
          <van-image width="99%" height="100%" :src="formData.accounting_report" />
        </van-col>
      </van-row>

      <div inset v-for="(item, index) in formData.companionList" :model="formData" :key="index" title="同行人">
        <van-cell value="同行人">
          <!-- <template #right-icon>
            <van-icon
              style="padding-right: 1rem"
              @click="pushResidentList()"
              name="plus"
              class="search-icon"
              >添加</van-icon
            >
            <van-icon
              @click="removeResident(index)"
              name="cross"
              class="search-icon"
              >删除</van-icon
            >
          </template> -->
        </van-cell>
        <van-field input-align="right" label="姓名" v-model="formData.companionList[index].name" name="pattern"
          placeholder="请输入姓名" />
        <van-field input-align="right" label="身份证号" v-model="formData.companionList[index].cardNo" name="pattern"
          placeholder="请输入身份证号" maxlength="18" />
        <van-field input-align="right" label="手机号" v-model="formData.companionList[index].mobile" name="pattern"
          placeholder="请输入手机号" />
      </div>

      <!-- <div style="margin: 16px">
        <p style="font-size: 12px">
          <van-checkbox v-model="checked" shape="square"
            >我已阅知本申报所列事项，并保证以上报备内容正确属实
          </van-checkbox>
        </p>
      </div>
      <div style="margin: 16px; display: flex">
        <van-button block type="info" native-type="submit">确认</van-button>
      </div> -->
      <div style="margin: 16px; display: flex">
        <van-button block type="info" @click="$router.go(-1)">返回</van-button>
      </div>
      <div style="margin: 16px"></div>
    </van-form>

    <van-dialog title="提交成功请截图留存" :beforeClose="beforeClose" v-model="isShow">
      <van-row>
        <van-col span="24" style="padding-right: 10%; padding-left: 10%">
          <span>运单号:{{ code }}</span>
        </van-col>
      </van-row>
      <van-row>
        <van-col span="24" style="padding-right: 18%; padding-left: 18%">
          <span>创建时间:{{ createDate }}</span>
        </van-col>
      </van-row>
      <van-row>
        <van-col span="24" style="padding-right: 30%; padding-left: 30%">
          <span>车牌号:{{ carNo }}</span>
        </van-col>
      </van-row>
      <van-row>
        <van-col span="8"></van-col>
        <van-col span="8">
          <van-image width="120" height="120" :src="baseImg" />
        </van-col>
        <van-col span="8"></van-col>
      </van-row>
      <div style="display: flex">
        <p style="padding-left: 7%; padding-right: 7%">
          &nbsp;&nbsp;最后核酸检测时间:&nbsp;{{ nucleinEndTime }}
        </p>
      </div>
    </van-dialog>

    <!-- 性别类型 -->
    <!-- <van-popup v-model="showSex" round position="bottom">
      <van-picker
        show-toolbar
        :columns="sexColumns"
        @cancel="showSex = false"
        @confirm="onSexConfirm"
      />
    </van-popup> -->

    <!-- 证件类型 -->
    <van-popup v-model="showCertificate" round position="bottom">
      <van-picker show-toolbar :columns="columns" @cancel="showCertificate = false" @confirm="onConfirm" />
    </van-popup>
    <!-- 社区code -->
    <van-popup v-model="showCode" round position="bottom">
      <van-picker show-toolbar :columns="showCodeColumns" value-key="name" @cancel="showCode = false"
        @confirm="onCodeConfirm" />
    </van-popup>

    <!-- 日期 -->
    <van-popup v-model="showDate" round position="bottom">
      <van-datetime-picker @confirm="getConfirm" @cancel="showDate = false" :min-date="minDate" type="date"
        title="选择年月日" />
    </van-popup>
  </div>
</template>

<script>
import { areaList } from '@vant/area-data'
import area from '@/libs/area.json'
import { addTraffic, check48, getByTruckId } from '@/api/truck/record'
import { helpUserQrCode } from '@/api/self/help'

import { Toast, Dialog } from 'vant'
export default {
  data() {
    return {
      end_addr_list: '',
      baseImg: '',
      nucleinEndTime: '', // 最后核酸时间
      code: '', // 运单号
      createDate: '', // 创建时间
      carNo: '', // 车辆编号
      isShow: false,
      mudidiShow: false,
      cascaderValue: '',
      trave_mode_show: false,
      showTwoLabel: false,
      checked: false,
      goDlShow: false,
      showArea: false,
      showArea2: false,
      areaList,
      minDate: new Date(1900, 0, 1),
      showDate: false, // 选择生日
      seat_number_label: '',
      range_label: '',
      columns: ['身份证', '护照', '军官证', '港澳通行证'],
      showCodeColumns: [
        {
          name: '中山区',
          value: '210202'
        },
        {
          name: '西岗区',
          value: '210203'
        },
        {
          name: '沙河口区',
          value: '210204'
        },
        {
          name: '甘井子区',
          value: '210211'
        },
        {
          name: '旅顺口区',
          value: '210212'
        },
        {
          name: '金普新区',
          value: '210213'
        },
        {
          name: '高新园区',
          value: '210214'
        },
        {
          name: '长兴岛经济区',
          value: '210216'
        },
        {
          name: '长海县',
          value: '210224'
        },
        {
          name: '瓦房店市',
          value: '210281'
        },
        {
          name: '普兰店市',
          value: '210282'
        },
        {
          name: '庄河市',
          value: '210283'
        }
      ],
      options: [
        {
          text: '高速',
          value: '330001',
          children: [
            {
              text: 'G15沈海高速',
              value: '330001',
              children: [
                { text: '炮台站', value: '330101' },
                { text: '石河站', value: '330102' },
                { text: '金州站', value: '330103' },
                { text: '海湾北站', value: '330113' },
                { text: '三十里堡站', value: '330104' },
                { text: '李官站', value: '330105' },
                { text: '太平湾站', value: '330106' },
                { text: '老虎屯站', value: '330107' },
                { text: '瓦房店站', value: '330108' },
                { text: '瓦房店南站', value: '330109' },
                { text: '周水子站', value: '330110' },
                { text: '营城子站', value: '330111' },
                { text: '长城站', value: '330112' },
                { text: '三涧堡站', value: '330113' },
                { text: '旅顺站', value: '330114' },
                { text: '旅顺新港站', value: '3301015' }
              ]
            },
            {
              text: 'G11鹤大高速',
              value: '320002',
              children: [
                { text: '十里岗北站', value: '320200' },
                { text: '董家沟站', value: '320201' },
                { text: '得胜站', value: '320202' },
                { text: '杏树屯站', value: '320203' },
                { text: '登沙河站', value: '320204' },
                { text: '皮口站', value: '320205' },
                { text: '杨树房站', value: '320206' },
                { text: '十里岗南站', value: '320207' },
                { text: '大连站', value: '320208' },
                { text: '大连湾站', value: '320209' },
                { text: '城子坦站', value: '320210' },
                { text: '明阳站', value: '320211' },
                { text: '花园口站', value: '320212' },
                { text: '大郑站', value: '320213' },
                { text: '庄河站', value: '320214' },
                { text: '庄河东站', value: '320215' },
                { text: '吴炉站', value: '3201216' },
                { text: '青堆子站', value: '320217' },
                { text: '栗子房站', value: '320218' }
              ]
            },
            {
              text: 'S12皮长高速',
              value: '320003',
              children: [
                { text: '松木岛站', value: '320301' },
                { text: '复州湾站', value: '320302' },
                { text: '普兰店东站', value: '320303' },
                { text: '普兰店西站', value: '320304' },
                { text: '兴隆堡站', value: '320305' },
                { text: '普兰店站', value: '320306' },
                { text: '长兴岛站', value: '320307' },
                { text: '松木岛站', value: '320308' }
              ]
            },
            {
              text: 'S23大窑湾疏港高速',
              value: '320004',
              children: [
                { text: '关家店站', value: '320401' },
                { text: '二十里站', value: '320402' },
                { text: '大连港站', value: '320403' }
              ]
            },
            ,
            {
              text: 'S19庄盖高速',
              value: '320005',
              children: [
                { text: '庄河西站', value: '320501' },
                { text: '光明山站', value: '320502' },
                { text: '长岭站', value: '320503' },
                { text: '步云山站', value: '320504' }
              ]
            }
          ]
        },
        {
          text: '港口',
          value: '700000',
          children: [
            {
              text: '辽渔新港',
              value: '700100'
            },
            {
              text: '大连港',
              value: '700200'
            },
            {
              text: '旅顺新港',
              value: '700300'
            },
            {
              text: '旅顺西站',
              value: '700400'
            }
          ]
        },
        {
          text: '国道',
          value: '600000',
          children: [
            {
              text: '国道G201',
              value: '600100',
              children: [{ text: '栗子房镇', value: '600101' }]
            },
            {
              text: '国道G202',
              value: '600200',
              children: [{ text: '李官镇', value: '600201' }]
            },
            {
              text: '国道G228',
              value: '600300',
              children: [
                { text: '栗子房镇', value: '600301' },
                { text: '李官镇', value: '600401' }
              ]
            },

            {
              text: '国道G305',
              value: '600400',
              children: [{ text: '桂云花乡', value: '600401' }]
            }
          ]
        },
        {
          text: '省道',
          value: '500000',
          children: [
            {
              text: '省道S210',
              value: '500100',
              children: [{ text: '塔岭镇', value: '500101' }]
            },
            {
              text: '省道S211',
              value: '500200',
              children: [{ text: '安波街道', value: '500201' }]
            },
            {
              text: '省道S212',
              value: '500300',
              children: [{ text: '许屯镇', value: '500301' }]
            },
            {
              text: '省道S314',
              value: '500400',
              children: [{ text: '鞍子山乡', value: '500401' }]
            },
            {
              text: '省道S315',
              value: '500500',
              children: [{ text: '仙人洞镇', value: '500501' }]
            }
          ]
        },
        {
          text: '县道',
          value: '400000',
          children: [
            {
              text: '县道X028',
              value: '400100',
              children: [{ text: '许屯镇', value: '400100' }]
            }
          ]
        }
      ],
      trave_columns: ['飞机', '火车', '轮渡', '自驾', '客运'],
      formData: {
        carType: 3, // 固定
        enterType: 6, // 入连方式  6 交通卡口
        name: '', // 姓名
        cardNo: '', // 身份证
        carNo: '', // 车牌号
        startAddr: '', // 出发地省市区
        chargeBarrier: '', // 到达收费口  入连卡口
        tonnage: '', // 吨位
        endAddrDistrict: '', // 目的地区
        endAddrDistrictName: '', // 目的地区名称
        endAddrStreet: '', // 街道
        endAddrCommunity: '', // 社区
        endAddr: '', // 详细地址
        avenueFlowArea: '0', // 途经重点关注地区
        nucleicAcid: '1', // 48小时持有核酸检测证明
        companionList: [], // 同行人list
        goal_harbor_name: '', // 高速口
        owner_unit: '', // 车辆所属公司
        health_code: '', // 健康码
        tour_code: '', // 行程码
        accounting_report: '' // 核酸报告
      },
      forArea: area,
      Province: '', // 省
      city: '', // 市
      area: '', // 区
      title: '省', // 标题省  市  区
      show: false, // 城市选择
      pickerShow: false, // 时间选择
      isGetArea: false, // 是否已经获取上车省市区
      showCertificate: false, // 证件类型
      showCode: false,
      phoneRules: /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/,
      postData: [],
      rules: {
        name: [
          {
            required: true,
            message: '请输入姓名',
            trigger: ['blur', 'change']
          }
        ],

        mobile: [
          {
            required: true,
            message: '请输入手机号',
            trigger: ['blur', 'change']
          },
          { pattern: /^1[3456789]\d{9}$/, message: '手机号码格式错误！' }
        ],
        cardNo: [
          {
            required: true,
            message: '请输入身份证号',
            trigger: ['blur', 'change']
          },
          {
            pattern: /^[1-9]{1}[0-9]{14}$|^[1-9]{1}[0-9]{16}([0-9]|[xX])$/,
            message: '身份证号码格式错误！'
          }
        ]
      }
    }
  },
  mounted() {
    // this.pushResidentList()
    // this.formData = {
    //   carType: 3,
    //   enterType: 6,
    //   name: 'wangdiran',
    //   cardNo: '222111223344444455',
    //   carNo: 'wangdiran',
    //   startAddr: '123',
    //   chargeBarrier: '炮台站',
    //   tonnage: '213213',
    //   endAddrDistrict: '210212',
    //   endAddrDistrictName: '旅顺口区',
    //   endAddrStreet: '21323',
    //   endAddrCommunity: '12313',
    //   endAddr: '12313',
    //   avenueFlowArea: '0',
    //   nucleicAcid: '1',
    //   companionList: [],
    //   mobile: '13999999999',
    //   startAddrProvince: '北京市/北京市/东城区',
    // }

    this.getFormData()
  },

  methods: {
    getFormData() {
      let data = { id: this.$route.query.id }
      getByTruckId(data).then(res => {
        if (res.data.errcode === 0) {
          this.formData = res.data.data
        } else {
          Toast.fail(res.data.errmsg)
        }
      })
    },
    beforeClose(action, done) {
      // if(!this.userName || !this.userPass) {
      //    this.$toast("请输入用户名和密码")
      //    done(false) //不关闭弹框
      // }
      if (action === 'confirm') {
        setTimeout(done, 1000)
        // 提交成功清空数据
        for (let i in this.formData) {
          this.formData[i] = ''
          this.formData.avenueFlowArea = true
        }
      }
      // else if (action === 'cancel') {
      //   done() //关闭
      // }
    },
    mudidiContrell() {
      if (this.mudidiShow == false) {
        this.mudidiShow = true
      } else {
        this.mudidiShow = false
      }
    },
    changeInput() {
      let data = { name: this.formData.name, cardNo: this.formData.cardNo }
      // check48(data).then((res) => {
      //   Toast.clear()
      //   if (res.data.errcode === 0) {
      //     var oDate1 = new Date()
      //     var oDate2 = new Date(res.data.data.data.data.data.data.hsjcsj)
      //     if (this.formatDuring(oDate1.getTime() - oDate2.getTime()) > 3) {
      //       this.formData.nucleicAcid = '0'
      //     } else {
      //       this.formData.nucleicAcid = '1'
      //     }
      //   } else {
      //     Toast.fail(res.data.msg)
      //   }
      // })
    },
    formatDuring(mss) {
      var days = parseInt(mss / (1000 * 60 * 60 * 24))
      // var hours = parseInt((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
      // var minutes = parseInt((mss % (1000 * 60 * 60)) / (1000 * 60))
      // var seconds = (mss % (1000 * 60)) / 1000
      // return (
      //   days + ' 天 ' + hours + ' 小时 ' + minutes + ' 分钟 ' + seconds + ' 秒 '
      // )
    },
    onFinish({ selectedOptions }) {
      this.trave_mode_show = false
      // this.formData.chargeBarrier = selectedOptions
      //   .map((option) => option.text)
      //   .join('/')
      this.formData.chargeBarrier =
        selectedOptions[2] == null
          ? selectedOptions[1].text
          : selectedOptions[2].text
    },
    pushResidentList() {
      this.formData.companionList.push({
        // user_info_id: this.$route.query.id,
        name: '',
        cardNo: '',
        mobile: ''
      })
    },
    removeResident(index) {
      // if (index == 0) {
      //   Toast.fail('不能继续删除')
      //   return
      // }
      this.formData.companionList.splice(index, 1)
    },

    getConfirm(value) {
      let yy = new Date(value).getFullYear()
      let mm = new Date(value).getMonth() + 1
      let dd = new Date(value).getDate()
      this.formData.bithday = yy + '-' + mm + '-' + dd
      this.showDate = false
    },
    onAreaConfirm(value) {
      this.showArea = false
      this.formData.startAddrProvince = value
        .filter(item => !!item)
        .map(item => item.name)
        .join('/')
    },
    enAreaConfirm(value) {
      this.showArea2 = false
      this.formData.end_addr_list = value
        .filter(item => !!item)
        .map(item => item.name)
        .join('/')
      //   let endAdd  ={"name":this.formData.end_addr_list};
      //   destinationByCity(endAdd).then((res) => {
      //   if (res.data.errcode === 0) {
      //     this.showCodeColumns = res.data.data
      //   } else {
      //     Toast.fail(res.data.msg)
      //   }
      // })
    },
    onConfirm(value) {
      this.label = value
      this.formData.card_type = value
      this.showCertificate = false
    },
    onCodeConfirm(value) {
      this.formData.endAddrDistrictName = value.name
      this.formData.endAddrDistrict = value.value
      this.showCode = false
    },

    goDlConfirm(value) {
      const formatDate = value =>
        `${value.get}/${value.getMonth() + 1}/${value.getDate()}`
      let yy = new Date(value).getFullYear()
      let mm = new Date(value).getMonth() + 1
      let dd = new Date(value).getDate()
      this.formData.estimated_arrival_date = yy + '-' + mm + '-' + dd
      this.goDlShow = false
    },
    onSexConfirm(value) {
      this.label = value
      this.formData.sex = value
      this.showSex = false
    },

    onSubmit() {
      if (this.checked == false) {
        Toast.fail('请确认报备内容正确属实')
        return
      }
      if (this.formData.nucleicAcid == null) {
        Toast.fail('请重新输入身份证号码以获取48小时核酸证明校验')
      }
      this.$refs.formDataRef.validate().then(() => {
        Toast.loading({
          message: '加载中...',
          forbidClick: true,
          duration: 10000
        })
        addTraffic(this.formData).then(res => {
          Toast.clear()
          if (res.data.errcode === 0) {
            this.nucleinEndTime = res.data.data.nucleinTime
            this.code = res.data.data.code
            this.createDate = res.data.data.createDate
            this.carNo = res.data.data.carNo // 车辆编号
            helpUserQrCode(this.formData).then(rest => {
              if (rest.data.errcode === 0) {
                this.baseImg = rest.data.data
              } else {
                Toast.fail(rest.data.msg)
              }
            })
            // if (
            //   this.formatDuring(oDate1.getTime() - oDate2.getTime()) > 3
            // ) {
            //   this.formData.nucleicAcid = '0'
            // } else {
            //   this.formData.nucleicAcid = '1'
            // }
            //   } else {
            //     Toast.fail(res.data.msg)
            //   }
            // })
            Dialog.alert({
              message: '添加成功'
            }).then(() => {
              // on close
            })
            const TIMEOUT = setTimeout(() => {
              Dialog.close()
              clearTimeout(TIMEOUT)
            }, 1000)
            this.isShow = true
          } else {
            Toast.fail(res.data.msg)
          }
        })
      })
    },
    checkoutArea(item) {
      if (!this.Province) {
        // 选择省
        this.Province = item.name
        this.forArea = item.child
        this.title = '市'
      } else if (!this.city) {
        // 选择市
        this.city = item.name
        this.forArea = item.child
        this.title = '区'
      } else if (!this.area) {
        // 选择区
        this.area = item
        this.show = false
        this.title = '省'
        // 拼接省市区 展示页面
        this.formData.start_station_addr =
          this.Province + '/' + this.city + '/' + this.area

        this.forArea = area
        // 清空省市区 为了下一次选择省市区
        this.Province = ''
        this.city = ''
        this.area = ''
      }
    }
  }
}
</script>
<style lang="less" scoped>
.upload-img-5 {
  margin: 5px 0 90px 0;
}

.upload-img-1 {
  margin: 5px 0 15px 0;
}

.home {
  background: url('../../assets/images/smtb.jpg') no-repeat;
  height: 100%;

  img {
    // background: url('../../assets/images/smtb.jpg');
    width: 100%;
  }

  .dialog-container {
    height: 70vh;
    overflow-y: auto;
  }

  .get-area {
    width: 100%;
    padding: 0 0.8rem;
    font-size: 0.747rem;
    color: #fff;
    background-color: #1989fa;
    border: 0.053rem solid #1989fa;
    height: 2.347rem;
    line-height: 2.347rem;
    text-align: center;
    border-radius: 0.107rem;
    cursor: pointer;
    box-sizing: border-box;
    margin-right: 10px;
  }

  /deep/.van-field__label {
    width: 8em;
  }

  /deep/.van-field__error-message {
    text-align: right;
  }

  .title {
    // font-size: 28px;
    text-indent: 20px;
    padding: 50px 0 20px;
  }

  .container {
    width: 90%;
    height: 80vh;
    overflow-y: auto;
    border: 1px solid #adadad;
    margin: auto;

    .item {
      margin: 10px;
    }
  }
}

.up-and-down {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f1f3f4;
  height: 80px;
  color: #333;
}

.home .blue {
  background-color: transparent;
}

.home .van-cell {
  background-color: transparent;
}
</style>
